<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <h1 @click="add">{{ message }}</h1>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      el: "#app",

      data: {
        message: "生命周期钩子函数",
        timer: null,
        ws: null,
      },

      methods: {
        add() {},
        chat() {}, //聊天功能
      },

      //1.阶段一：初始化阶段
      //创建前
      beforeCreate() {
        // Vue 实例创建前被调用，数据和模板均未获取到
        console.log("beforeCreate()", this.$el, this.$data); //undefined undefined 挂载点还没有;数据还没有准备好；
      },

      //创建后
      created() {
        // Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到
        // 建议在这里面发送 ajax 异步请求
        console.log("created()", this.$el, this.$data); //已经可以获取到data里面的数据，但是还没有拿到挂载点。

        //进入页面就开了定时器
        this.timer = setInterval(() => {
          console.log(111);
        }, 1000);

        //进入页面就开启聊天功能
        this.ws = new WebSocket("ws://localhost:2020"); //长连接：只要连接成功，一方不主动关闭，是不会断开连接
        this.chat(); //聊天功能
      },

      //挂载前
      beforeMount() {
        // 数据挂载之前，获取到了模板，但是数据还未挂载到模板上
        console.log("beforeMount()", this.$el, this.$data); //挂载点已找到，数据也准备好，但是还未渲染到节点里面
      },

      //挂载后
      mounted() {
        // 数据已经挂载到模板中了
        console.log("mounted()", this.$el, this.$data);
      },

      //2.更新阶段(数据有变化就触发)
      //更新前
      beforeUpdate() {
        // 当data 数据更新之后，去更新模板中的数据前调用
        console.log("beforeUpdate()", this.$el.innerHTML, this.$data);
      },

      //更新后
      updated() {
        console.log("updated()", this.$el.innerHTML, this.$data);
      },

      //3.销毁阶段（主动销毁: $destroy();路由切换组件的时候，组件也会被销毁）
      beforeDestroy() {
        //销毁 Vue 实例之前调用
        // 收尾工作：系统做：销毁data里面的数据，和解绑事件；主动做：关闭定时器(在这个页面如果有定时器。销毁vue实例的时候，需要主动关闭定时器)；关闭聊天：
        console.log("beforeDestroy()");
        clearInterval(this.timer); //主动关闭定时器
        this.ws.close(); //销毁实例的时候，关闭websocket连接
      },

      destroyed() {
        //销毁 Vue 实例之后调用
        console.log("destroyed()");
      },
    });
  </script>
</html>
